<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn1">将吃鸡放到所有城市后面</button>
        <button id="btn2">将吃鸡放到所有城市前面</button>
        <button id="btn3">将吃鸡放到上海的后面</button>
        <button id="btn4">将吃鸡放到上海的前面</button>
        <button id="btn5">删除北京</button>
        <button id="btn6">删除所有节点</button>
    </div>
    <ul>
        <li id="beijing">北京</li>
        <li id="shanghai">上海</li>
        <li id="zhengzhou">郑州</li>
        <li id="chiji">吃鸡</li>
        <li id="wangzherongyao">王者荣耀</li>
    </ul>
</body>
<script>
     let Parentelement =document.querySelector("li").parentNode;
    let chiji =document.getElementById("chiji"); 

   /*  let ul =document.querySelector("ul");
    let div = document.createElement("div");
    div.appendChild(ul);
    document.body.appendChild(div); */

    function flashtext() {
        chiji.style.color = chiji.style.color == "gold" ? "hotpink" : "gold";    
    }
    let time = setInterval(flashtext,500);

    document.getElementById("btn1").addEventListener("click",function(){
       let wangzherongyao = document.getElementById("wangzherongyao");
       Parentelement.insertBefore(chiji,wangzherongyao); 
       //clearInterval(time);
    })
   /*  document.getElementById("btn1").addEventListener("mouseenter",function(){
        alert("顾得摸你，大家好");
    }) */

    document.getElementById("btn2").onclick=function(){
      
        Parentelement.insertBefore(chiji,Parentelement.firstChild);

    }

    //不能实现
    /* function flashtext(){
        beijing.style.color = beijing.style.color =="green"?"babyblue":"green";
    }
    let timeTag = setInterval(flashtext,500); */
   

    document.getElementById("btn3").onclick=function(){
        let zhengzhou = document.getElementById("zhengzhou");
        Parentelement.insertBefore(chiji,zhengzhou);
    }


    document.getElementById("btn4").onclick=function(){
        let shanghai = document.getElementById("shanghai");
        Parentelement.insertBefore(chiji,shanghai);
    }

    document.getElementById("btn5").addEventListener("click",function(){
        let beijing = document.getElementById("beijing");
        Parentelement.removeChild(beijing);
        btn5.setAttribute("disabled","");
    })

    document.getElementById("btn6").addEventListener("click",function(){
        document.body.removeChild(Parentelement);
        btn5.setAttribute("disabled","");

        /* 
        firstChild  第一个节点
        while(Parentelementu.firstChild){  while 语句 判断 父节点中有没有第一个节点 有的话执行如下：
				Parentelement.removeChild(Parentelement.firstChild);   //Parentelement.removeChild   在父元素中循环删除第一个节点
			}
         */

    let button =document.querySelectorAll("button");
        for(let i=0; i<button.length;i++){
            let btn = button[i];
            btn.setAttribute("disabled","");
        }

        /*  for(let index in button){
          let btn = button[index];
          btn.setAttribute("disabled","");
        }  */
        
   
    })
</script>
</html>